<template>
  <div class="shiming">
    <div class="header">
      <van-nav-bar title="实名认证" left-text left-arrow @click-left="onClickLeft" />
    </div>
    <div class="middle">
      <div>
        <van-image
          round
          width="8rem"
          height="8rem"
          src="http://8.134.121.225/ej-app-employee/static/img/%E5%AE%89%E5%85%A8.51879af4.png"
        />
      </div>
      <div class="sm" align="center" style="font-size=30px">进行实名验证</div>
      <div class="bz" align="center" style="color:darkgray">用于保障账号的安全及快速接收订单信息</div>
    </div>
    <div class="table">
      <van-form @submit="onSubmit">
        <van-field
          style="font-size: 15px;"
          v-model="name"
          name="真实姓名"
          label="真实姓名"
          placeholder="真实姓名"
          :rules="[{required: true, message: '请填写真实姓名'}]"
          label-align="center"
        />
        <van-field
          style="font-size: 15px;"
          v-model="sfword"
          type="sfword"
          name="身份证号"
          label="身份证号"
          placeholder="身份证号"
          :rules="[{required: true, message: '请填写身份证号'}]"
          label-align="center"
        />
        <van-field
          style="font-size: 15px;"
          v-model="kaword"
          type="kaword"
          name="银行卡号"
          label="银行卡号"
          placeholder="银行卡号"
          :rules="[{required: true, message: '请填写银行卡号'}]"
          label-align="center"
        />
        <van-field style="font-size: 15px;" name="uploader" label="身份证正面照" label-align="center">
          <template #input>
            <van-uploader v-model="uploader1" />
          </template>
        </van-field>
        <van-field style="font-size: 15px;" name="uploader" label="身份证反面照" label-align="center">
          <template #input>
            <van-uploader v-model="uploader2" />
          </template>
        </van-field>
        <van-field style="font-size: 15px;" name="uploader" label="银行卡照片" label-align="center">
          <template #input>
            <van-uploader v-model="uploader3" />
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button
            color="linear-gradient(90deg, #bf73ff, #7579ff)"
            round
            size="large"
            @click="up"
          >提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { get, post } from "@/http/axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      form: {},
      kaword: "",
      sfword: "",
      name: "",
      uploader1: [],
      uploader2: [],
      uploader3: [],
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),

    onSubmit(values) {
      console.log("submit", values);
    },
    //返回
    onClickLeft() {
      this.$router.go(-1);
    },
    async up() {
      let data = {
        realname: this.name,
        idCard: this.idCard,
        idcardPhotoPositive: this.photo1,
        idcardPhotoNegative: this.photo2,
        bankCard: this.number,
        bankCardPhoto: this.photo3,
        userId: this.userInfo.id,
      };
      await post("/certification/submitCertificationApply", data);
      Toast.success("提交成功");
      this.$router.go(-1);
    },
  },
  created() {
    this.getUserInfo();
  },
};
</script>

<style scoped>
.div,
.div,
.van-nav-bar {
  height: 58px;
  background-image: linear-gradient(90deg, #bf73ff, #7579ff);
  text-align: center;
  line-height: 58px;
}

::v-deep .van-icon-arrow-left {
  color: white;
}

::v-deep .van-nav-bar__title {
  color: white;
}

.div,
.div,
.van-image {
  margin-left: 120px;
  margin-top: 20px;
}

.sm {
  margin-bottom: 10px;
  letter-spacing: 2px;
}
.bz {
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: 2px;
}
.table {
  margin-bottom: 70px;
}
</style>